<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>
    <link href="jquery/crm/pagination.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="jquery/crm/CluePagination.js"></script>
    <script type="text/javascript" src="jquery/crm/jquery.pagination.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>


    <script type="text/javascript">

        $(function () {
            window.pageNum = 1;
            window.pageSize = 10;
            generateCluePage();
//给所有的日期输入框添加日期插件
            $(".mydate").datetimepicker({
                language: 'zh-CN',//语言
                format: 'yyyy-mm-dd',//日期格式
                minView: 'month',//日期选择器上最小能选择的日期的视图
                initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose: true,//选择日期之后，是否自动关闭日历
                todayBtn: true,//是否显示当前日期的按钮
                clearBtn: true,//是否显示清空按钮
                // container:"#editActivityModal"
            });

            //显示模态框
            $("#createBtn").click(function () {
                $("#createClueModal1").modal("show");
                //清除模态框原先的数据
                $("#clueCreateModalForm")[0].reset();
            });
            //给模态框"保存"按钮添加单击事件
            $("#saveCreateClueBtn").click(function () {
                //收集参数
                var owner = $("#create-clueOwner").val();
                var company = $.trim($("#create-company").val());
                var appellation = $("#create-appellation").val();
                var fullName = $.trim($("#create-fullName").val());
                var job = $.trim($("#create-job").val());
                var email = $.trim($("#create-email").val());
                var phone = $.trim($("#create-phone").val());
                var website = $.trim($("#create-website").val());
                var mphone = $.trim($("#create-mphone").val());
                var state = $("#create-state").val();
                var source = $("#create-source").val();
                var description = $.trim($("#create-description").val());
                var contactSummary = $.trim($("#create-contactSummary").val());
                var nextContactTime = $("#create-nextContactTime").val();
                var address = $.trim($("#create-address").val());
                //表单验证(作业)
                //判断公司是否为空
                if (company == null || company == "") {
                    layer.msg("公司不能为空");
                    return false;
                }
                //判断姓名是否合法
                if (fullName == null || fullName == "") {
                    layer.msg("姓名不能为空");
                    return false;
                }
                //发送请求
                $.ajax({
                    url: 'workbench/clue/createClue.do',
                    data: {
                        fullName: fullName,
                        appellation: appellation,
                        owner: owner,
                        company: company,
                        job: job,
                        email: email,
                        phone: phone,
                        website: website,
                        mphone: mphone,
                        state: state,
                        source: source,
                        description: description,
                        contactSummary: contactSummary,
                        nextContactTime: nextContactTime,
                        address: address
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.successCode == "1") {
                            //关闭模态窗口
                            $("#createClueModal1").modal("hide");
                            layer.msg("添加成功")
                            //刷新线索列表
                            window.pageNum = 1;
                            generateCluePage();
                        } else {
                            //提示信息
                            layer.msg(data.message);
                            //模态窗口不关闭
                            $("#createClueModal1").modal("show");
                        }
                    },
                    error:function (data) {
                        layer.msg(data.message);
                    }
                });
            });
            //给查询按钮添加单机事件
            $("#queryClueBtn").click(function () {
                generateCluePage();
            });

            //给修改按钮添加点击事件
            $("#changeClueBtn").click(function () {

                //必须选中一个才能修改
                var cks = $(".itemBox:checked");
                if (cks.length == 0) {
                    layer.msg("请选择要修改的数据");
                    return false;
                }
                if (cks.length > 1) {
                    layer.msg("只能选择一条数据进行修改");
                    return false;
                }
                if (cks.length == 1) {
                    var id = cks.val();
                    //发起ajax请求
                    $.ajax({
                        url: "workbench/clue/getClue.do",
                        type: "post",
                        data: {"id": id},
                        dataType: "json",
                        success: function (response) {
                            if (response.successCode == "0") {
                                layer.msg("success" + response.message)
                            } else {
                                //给隐藏域中id赋值
                                $("#edit-id").val(response.data.id);
                                //将查询出来的owner和下拉框中的value比较，相等则将该选项的selected属性置位true
                                var ownerops = $("#edit-clueOwner option");
                                var owner = response.data.owner;
                                $.each(ownerops, function (index, item) {
                                    if (owner == item.value) {
                                        $(this).prop("selected", true)
                                    }
                                });
                                //将查询的称呼的id值进行比较，然后选中回显的称呼选项
                                var callops = $("#edit-call option");
                                var appellation = response.data.appellation;
                                $.each(callops, function (index, item) {
                                    if (appellation == item.value) {
                                        $(this).prop("selected", true)
                                    }
                                });
                                var stateops = $("#edit-status option");
                                var state = response.data.state;
                                $.each(stateops, function (index, item) {
                                    if (state == item.value) {
                                        $(this).prop("selected", true)
                                    }
                                });
                                var sourceops = $("#edit-source option");
                                var source = response.data.source;
                                $.each(sourceops, function (index, item) {
                                    if (source == item.value) {
                                        $(this).prop("selected", true)
                                    }
                                });

                                var company = $.trim($("#edit-company").val(response.data.company));
                                var fullName = $.trim($("#edit-fullName").val(response.data.fullName));
                                var job = $.trim($("#edit-job").val(response.data.job));
                                var email = $.trim($("#edit-email").val(response.data.email));
                                var phone = $.trim($("#edit-phone").val(response.data.phone));
                                var website = $.trim($("#edit-website").val(response.data.website));
                                var mphone = $.trim($("#edit-mphone").val(response.data.mphone));
                                var description = $.trim($("#edit-description").val(response.data.description));
                                var contactSummary = $.trim($("#edit-contactSummary").val(response.data.contactSummary));
                                var nextContactTime = $("#edit-nextContactTime").val(response.data.nextContactTime);
                                var address = $.trim($("#edit-address").val(response.data.address));

                                //回显完数据，再打开模态框
                                $("#editClueModal1").modal("show");

                            }

                        },
                        error: function (response) {
                            layer.msg("error" + "系统繁忙,请稍后重试");
                        }
                    });

                }

//发起ajax请求进行回显数据

            })
            //给模态框保存按钮添加事件
            $("#changeClueModalBtn").click(function () {
                //获取参数
                var id= $("#edit-id").val();
                var owner = $.trim($("#edit-clueOwner").val());
                var appellation = $.trim($("#edit-call").val());
                var state = $.trim($("#edit-status").val());
                var source = $.trim($("#edit-source").val());
                var company = $.trim($("#edit-company").val());
                var fullName = $.trim($("#edit-fullName").val());
                var job = $.trim($("#edit-job").val());
                var email = $.trim($("#edit-email").val());
                var phone = $.trim($("#edit-phone").val());
                var website = $.trim($("#edit-website").val());
                var mphone = $.trim($("#edit-mphone").val());
                var description = $.trim($("#edit-description").val());
                var contactSummary = $.trim($("#edit-contactSummary").val());
                var nextContactTime = $("#edit-nextContactTime").val();
                var address = $.trim($("#edit-address").val());

                //判断公司是否为空
                if (company == null || company == "") {
                    layer.msg("公司不能为空");
                    return false;
                }
                //判断姓名是否合法
                if (fullName == null || fullName == "") {
                    layer.msg("姓名不能为空");
                    return false;
                }
                $.ajax({
                    url: "workbench/clue/changeClue.do",
                    type: "post",
                    data: {
                        id:id,
                        fullName: fullName,
                        appellation: appellation,
                        owner: owner,
                        company: company,
                        job: job,
                        email: email,
                        phone: phone,
                        website: website,
                        mphone: mphone,
                        state: state,
                        source: source,
                        description: description,
                        contactSummary: contactSummary,
                        nextContactTime: nextContactTime,
                        address: address
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.successCode == "0") {
                            layer.msg("success" + data.message)
                            $("#editClueModal1").modal("show")
                        } else {
                            //关闭模态框
                            $("#editClueModal1").modal("hide");
                            layer.msg("修改成功");
                            generateCluePage();
                        }

                    },
                    error: function (data) {
                        layer.msg("error" + "修改失败");
                    }
                })

            });


            //给删除按钮添加点击事件
            $("#deleteClueBtn").click(function () {
                var cks = $(".itemBox:checked");
                if (cks.length == 0) {
                    layer.msg("请选择要删除的数据");
                    return false;
                }
                var arr = [];
                //获取要删除的id名和
                for (var i = 0; i < cks.length; i++) {
                    var id = cks[i].value;
                    var fullName = $(cks[i]).parent().next().children().text();
                    arr.push({
                        "id": id,
                        "fullName": fullName
                    })
                }
                showConfirmModal(arr);

            });

            //给模态框删除按钮添加事件
            $("#modalDeleteBtn").click(function () {
                //将请求数组转为json数据
                var ids = JSON.stringify(clueArray);
                //关闭模态框
                $("#deleteModal").modal("hide");
                //发起ajax请求删除数据
                $.ajax({
                    url: "workbench/clue/dropClue.do",
                    type: "post",
                    data: ids,
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    success: function (data) {
                        if (data.successCode == "0") {
                            layer.msg("success" + data.message)
                        } else {
                            //关闭模态框
                            layer.msg("删除成功");
                            generateCluePage();
                        }

                    },
                    error: function (data) {
                        layer.msg("error" + "删除失败");
                    }
                })
            });

            //全选全不选
            $("#checkAll").click(function () {
                $(".itemBox").prop("checked", this.checked);
            });
            //给动态的复选框添加点击事件
            $("#tBody").on("click", ".itemBox", (function () {
                if ($(".itemBox").length == $(".itemBox:checked").length) {
                    $("#checkAll").prop("checked", true);
                } else {
                    $("#checkAll").prop("checked", false);
                }
            }));
            //选择页面中显示数据的数据量
            $("#pageSizeSelect").change(function () {
                pageSize = $(this).val();
                generateCluePage();
            });
        });

    </script>
</head>
<body>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>线索列表</h3>
        </div>
    </div>
</div>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="queryName">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">公司</div>
                        <input class="form-control" type="text" id="queryComp">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">公司座机</div>
                        <input class="form-control" type="text" id="queryCompPhone">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">线索来源</div>
                        <select class="form-control" id="queryClueSource">
                            <option></option>
                            <c:forEach items="${sourceList}" var="s">
                                <option value="${s.id}">${s.value}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <br>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="queryOwner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">手机</div>
                        <input class="form-control" type="text" id="queryPhone">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">线索状态</div>
                        <select class="form-control" id="queryClueState">
                            <option></option>
                            <c:forEach items="${stateList}" var="cs">
                                <option value="${cs.id}">${cs.value}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="queryClueBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createClueModal" id="createBtn"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" id="changeClueBtn" class="btn btn-default" data-toggle="modal" data-target="#editClueModal"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" id="deleteClueBtn" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>


        </div>
        <div style="position: relative;top: 50px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkAll"/></td>
                    <td>名称</td>
                    <td>公司</td>
                    <td>公司座机</td>
                    <td>手机</td>
                    <td>线索来源</td>
                    <td>所有者</td>
                    <td>线索状态</td>
                </tr>
                </thead>
                <tbody id="tBody">
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="2">
                        <span>请选择每页数据的数量</span><select id="pageSizeSelect" class="form-control" style="width: 80px;" class="selectedOption">
                        <option value="10" selected>10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                    </select>
                    </td>
                    <td colspan="3">
                        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                    </td>
                </tr>

                </tfoot>
            </table>
        </div>


    </div>

</div>

<!-- 创建线索的模态窗口 -->
<div class="modal fade" id="createClueModal1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">创建线索</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="clueCreateModalForm">

                    <div class="form-group">
                        <label for="create-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-clueOwner">
                                <option value="${sessionScope.USERINFO.id}" selected>${sessionScope.USERINFO.name}</option>
                                <c:forEach items="${users}" var="u">
                                    <option value="${u.id}">${u.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-company">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-appellation" class="col-sm-2 control-label">称呼</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-appellation">
                                <option></option>
                                <c:forEach items="${appellationList}" var="a">
                                    <option value="${a.id}">${a.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-fullName" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-fullName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-job" class="col-sm-2 control-label">职位</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-job">
                        </div>
                        <label for="create-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-phone" class="col-sm-2 control-label">公司座机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-phone">
                        </div>
                        <label for="create-website" class="col-sm-2 control-label">公司网站</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-website">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-mphone" class="col-sm-2 control-label">手机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-mphone">
                        </div>
                        <label for="create-state" class="col-sm-2 control-label">线索状态</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-state">
                                <option></option>
                                <c:forEach items="${stateList}" var="cs">
                                    <option value="${cs.id}">${cs.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-source" class="col-sm-2 control-label">线索来源</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-source">
                                <option></option>
                                <c:forEach items="${sourceList}" var="s">
                                    <option value="${s.id}">${s.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">线索描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                    <div style="position: relative;top: 15px;">
                        <div class="form-group">
                            <label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control mydate" id="create-nextContactTime" >
                            </div>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                    <div style="position: relative;top: 20px;">
                        <div class="form-group">
                            <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="1" id="create-address"></textarea>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveCreateClueBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改线索的模态窗口 -->
<div class="modal fade" id="editClueModal1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改线索</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label for="edit-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-clueOwner">
                                <c:forEach items="${userList}" var="u">
                                    <option value="${u.id}">${u.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-company" value="动力节点">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-call" class="col-sm-2 control-label">称呼</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-call">
                                <option></option>
                                <c:forEach items="${appellationList}" var="a">
                                    <option value="${a.id}">${a.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-fullName" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-fullName" value="李四">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-job" class="col-sm-2 control-label">职位</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-job" value="CTO">
                        </div>
                        <label for="edit-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-email" value="lisi@bjpowernode.com">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-phone" value="010-84846003">
                        </div>
                        <label for="edit-website" class="col-sm-2 control-label">公司网站</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-mphone" class="col-sm-2 control-label">手机</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-mphone" value="12345678901">
                        </div>
                        <label for="edit-status" class="col-sm-2 control-label">线索状态</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-status">
                                <option></option>
                                <c:forEach items="${stateList}" var="cs">
                                    <option value="${cs.id}">${cs.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-source" class="col-sm-2 control-label">线索来源</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-source">
                                <option></option>
                                <c:forEach items="${sourceList}" var="s">
                                    <option value="${s.id}">${s.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-description">这是一条线索的描述信息</textarea>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                    <div style="position: relative;top: 15px;">
                        <div class="form-group">
                            <label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="edit-contactSummary">这个线索即将被转换</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control mydate" id="edit-nextContactTime" value="2017-05-01">
                            </div>
                        </div>
                    </div>

                    <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                    <div style="position: relative;top: 20px;">
                        <div class="form-group">
                            <label for="edit-address" class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="1" id="edit-address">北京大兴区大族企业湾</textarea>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="changeClueModalBtn" data-dismiss="modal">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 确认模态窗口 -->
<div class="modal fade" id="deleteModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">您确定要删除以下线索吗？</h4>
            </div>
            <div class="modal-body" id="cluesNameDiv" align="center">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="modalDeleteBtn" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>